<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<style>
.btn_un
{
	cursor:pointer;
	color:white;
	width:68px;
	height:24px;
	border:0px;
	background-image: url(${pageContext.request.contextPath}/images/speedreport/btn_save_un.png);
}

.btn_nu
{
	cursor:pointer;
	color:white;
	width:68px;
	height:24px;
	border:0px;
	background-image: url(${pageContext.request.contextPath}/images/speedreport/btn_save_nu.png);
}

.spread_un
{
	vertical-align: bottom;
	background-image: url("");
	width: 61px; 
	height: 22px
}

.spread_nu
{
	vertical-align: bottom;
	background-image: url("${pageContext.request.contextPath}/images/speedreport/mousemove_bg.png");
	width: 61px; 
	height: 22px;
	color: white;
}

</style>
	<script type="text/javascript">
	var dyColumns=null;
	$(function() 
	{
		$(".listtable").zebra(); 
		//创建时间
		$('#dqm_accuracyruleconf_createtime97detail').my97({
			dateFmt:'yyyy-MM-dd HH:mm:ss',
			startDate:[{
				doubleCalendar:false,
				isShowWeek:false,
				isShowClear:false,
				readOnly:true
			}]
		});
		//修改时间
		$('#dqm_accuracyruleconf_modifytime97detail').my97({
			dateFmt:'yyyy-MM-dd HH:mm:ss',
			startDate:[{
				doubleCalendar:false,
				isShowWeek:false,
				isShowClear:false,
				readOnly:true
			}]
		});
		//规则算法
		$('#dqm_accuracyruleconf_rulealgorithmselectdetail').combobox({  
			url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=ruleAlgorithm',  
			valueField:'codeValue',
			textField:'codeName',
			required: true,
			value:${accuracyRuleConf.ruleAlgorithm},
			disabled:true,
			onLoadSuccess: function(){
				$('#dqm_accuracyruleconf_rulealgorithmselectdetailshow').html($('#dqm_accuracyruleconf_rulealgorithmselectdetail').combobox('getText'));
			}
		});
		//告警级别
		$('#dqm_accuracyruleconf_warnlevelselectdetail').combobox({  
			url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=warnLevel',  
			valueField:'codeValue',
			textField:'codeName',
			required: true,
			value:${accuracyRuleConf.warnLevel},
			disabled:true,
			onLoadSuccess: function(){
				$('#dqm_accuracyruleconf_warnlevelselectdetailshow').html($('#dqm_accuracyruleconf_warnlevelselectdetail').combobox('getText'));
			}
		});
		//阀值上限运算符
		$('#dqm_accuracyruleconf_thresholdmaxoperatorselectdetail').combobox({  
			url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=thresholdOperator',  
			valueField:'codeValue',
			textField:'codeName',
			required: true,
			value:${accuracyRuleConf.thresholdMaxOperator},
			disabled:true,
			onLoadSuccess: function(){
				if('<'==$('#dqm_accuracyruleconf_thresholdmaxoperatorselectdetail').combobox('getText'))
				{
					$('#dqm_accuracyruleconf_thresholdmaxoperatorselectdetailshow').html('&lt;');
				}else
				{
					$('#dqm_accuracyruleconf_thresholdmaxoperatorselectdetailshow').html($('#dqm_accuracyruleconf_thresholdmaxoperatorselectdetail').combobox('getText'));
				}
			}
		});
		//阀值下限运算符
		$('#dqm_accuracyruleconf_thresholdminoperatorselectdetail').combobox({  
			url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=thresholdOperator',  
			valueField:'codeValue',
			textField:'codeName',
			required: true,
			value:${accuracyRuleConf.thresholdMinOperator},
			disabled:true,
			onLoadSuccess: function(){
				$('#dqm_accuracyruleconf_thresholdminoperatorselectdetailshow').html($('#dqm_accuracyruleconf_thresholdminoperatorselectdetail').combobox('getText'));
			}
		});
		
		//ajax请求获取动态要加载的列信息
		$.ajax({
			url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDgColumns4modify.action?ruleId='+${accuracyRuleConf.ruleId},
			dataType:'json',
			success:function(result){
				if(result.length>0)
				{
					$('#dqm_accuracyruleconf_shrinkbtndivdetail').css("display", "block");
					dyColumns=result;
				}
			}
		});
		
		//让form中的input不可编辑
		$("#dqm_accuracyruleconf_detailform").find("input").not("#dqm_accuracyruleconf_baseinfocolsebtn").not("#dqm_accuracyruleconf_baseinfoshrinkbtn").not("#dqm_accuracyruleconf_colsebtn").attr("disabled","disabled");
		
		//让form中的textarea不可编辑
		$("#dqm_accuracyruleconf_detailform").find("textarea").attr("readonly","readonly");
		
	});
	
	//展开按钮事件
	function spread()
	{
		//显示基本信息填写页面，隐藏不能编辑的部分基本信息页面和维度配置页面
		$("#dqm_accuracyruleconf_baseinfodivdetail").slideDown("slow");
		$("#dqm_accuracyruleconf_simplebaseinfodivdetail").slideUp("slow");
		$("#dqm_accuracyruleconf_tipinfodivdetail").slideUp("slow");
	}
	
	//收缩按钮事件
	function shrink()
	{
		initSimpleBaseInfo();
		initDimConf();
		$("#dqm_accuracyruleconf_baseinfodivdetail").slideUp("slow");
		$("#dqm_accuracyruleconf_simplebaseinfodivdetail").slideDown("slow");
		$("#dqm_accuracyruleconf_tipinfodivdetail").slideDown("slow");
	}
	
	//给简单的基本信息div中的控件赋值
	function initSimpleBaseInfo()
	{
		var ruleName=$('#dqm_accuracyruleconf_rulenameinputdetail').val();
		var ruleAlgorithm=$('#dqm_accuracyruleconf_rulealgorithmselectdetail').combobox('getText');
		var warnLevel=$('#dqm_accuracyruleconf_warnlevelselectdetail').combobox('getText');
		
		$('#dqm_accuracyruleconf_rulenamelabeldetail').html(ruleName);
		$('#dqm_accuracyruleconf_rulealgorithmlabeldetail').html(ruleAlgorithm);
		$('#dqm_accuracyruleconf_warnlevellabeldetail').html(warnLevel);
	}
	//给规则配置的div中的控件赋值
	function initDimConf()
	{
		//初始化datagrid
		$('#dqm_accuracyruleconf_dimdatagriddetail').datagrid({
			url : '${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!detailDimsRule.action?ruleId='+${accuracyRuleConf.ruleId},
			title:'按维度添加规则',
			width:998,
			height:410,
			singleSelect:true,
			autoRowHeight:true,
			iconCls:'icon-edit',
			frozenColumns:[[  {field:'thresholdMax',title:'阀值上限',width:165,align:'center',editor:{type:'numberbox',options:{min:-99999999999999.999999,max:99999999999999.999999,precision:6,required:true,missingMessage:'请填写数字(包括小数，负数)'}}},
						{field:'thresholdMin',title:'阀值下限',width:165,align:'center',editor:{type:'numberbox',options:{min:-99999999999999.999999,max:99999999999999.999999,precision:6,required:true,missingMessage:'请填写数字(包括小数，负数)'}}},
						{field:'thresholdMaxOperator',title:'上限运算符',width:165,align:'center',
							formatter:function(value,row){
								return row.thresholdMaxOperatorName;
							},
							editor:
							{
								type:'combobox',
								options:
								{
									valueField:'codeValue',
									textField:'codeName',
									url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=thresholdOperator&thresholdName=max',
									required:true,
									editable:false,
									panelHeight:'auto'
								}
							}
						},
						{field:'thresholdMinOperator',title:'下限运算符',width:165,align:'center',
							formatter:function(value,row){
								return row.thresholdMinOperatorName;
							},
							editor:
							{
								type:'combobox',
								options:
								{
									valueField:'codeValue',
									textField:'codeName',
									url:'${pageContext.request.contextPath}/basemgr/accuracyRuleConfAction!getDic.action?codeType=thresholdOperator&thresholdName=min',
									required:true,
									editable:false,
									panelHeight:'auto'
								}
							}
						}
					]],
			columns:[[]]
		});
		
		//获取datagrid的配置信息
		var dgOptions=$('#dqm_accuracyruleconf_dimdatagriddetail').datagrid('options');
		//dyColumns类似:[{field:'dim_city',title:'南京'}，{field:'dim_city',title:'南京'}]
		for(var i=0;i<dyColumns.length;i++)
		{
			//往json对象中添加属性，变成类似:{field:'dim_city',title:'南京',width:80,align:'center',editor:'text'}
			dyColumns[i].editor="text";
			dyColumns[i].width=165;
			dyColumns[i].align="center";
			//向datagrid的第一个列列数组的最前面添加列
			dgOptions.columns[0].push(dyColumns[i]);
		}
	
		//重新配置datagrid
		$('#dqm_accuracyruleconf_dimdatagriddetail').datagrid(dgOptions); 
		//重新加载datagrid
		$('#dqm_accuracyruleconf_dimdatagriddetail').datagrid('reload');
	}
	
	//st:对象  type:class名称  change:改变小图标的名称
	function cbart (st,type,change)
	{
		document.getElementById(st).className = type;
		if(change!=""&&change!=null&&change!=undefined)
		{
			$("#"+st).children().children().attr("src","${pageContext.request.contextPath}/images/speedreport/"+change);
		}
	} 
	function sbart (st,type,change)
	{
		document.getElementById(st).className = type;
		if(change!=""&&change!=null&&change!=undefined)
		{
			$("#"+st).children().children().attr("src","${pageContext.request.contextPath}/images/speedreport/"+change);
		}
	}
	//关闭弹出窗口
	function colseDialog()
	{
		$('#dqm_accuracyruleconf_detaildialog').dialog('close');
	}
	</script>
<form id="dqm_accuracyruleconf_detailform" method="post">
	<!--收缩之后上面要显示简单基本信息div-->
	<div id="dqm_accuracyruleconf_simplebaseinfodivdetail" style="display:none;height:50%">
		<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%;background-image: url(${pageContext.request.contextPath}/images/speedreport/add_speedreport_bg.png)">
			<tr height="56px">
				<td style="padding-left:3px" width="120px">规则名称：<label id="dqm_accuracyruleconf_rulenamelabeldetail"></td>
				<td width="120px">规则算法：<label id="dqm_accuracyruleconf_rulealgorithmlabeldetail"></td>
				<td width="120px">告警级别：<label id="dqm_accuracyruleconf_warnlevellabeldetail"></td>
				<td width="10px"><div id="dqm_accuracyruleconf_spreadbtndivdetail" onclick="spread()" style="width:61px;height:22px;cursor:pointer;" onmouseout="cbart('dqm_accuracyruleconf_spreadbtndivdetail','spread_un','spread_img_un.png')" onmouseover="sbart('dqm_accuracyruleconf_spreadbtndivdetail','spread_nu','spread_img_nu.png')"><span style="vertical-align: bottom;">&nbsp;<img src="${pageContext.request.contextPath}/images/speedreport/spread_img_un.png">展开</span></div></td>
			</tr>
		 </table>
	</div>
	
	<!--基本信息div-->
	<div id="dqm_accuracyruleconf_baseinfodivdetail" data-options="region:'north'" style="overflow-y:hidden;width:100%;height:100%;">
		<table border="0" cellpadding="0" cellspacing="0" height="100%"  width="100%" class="listtable">
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>规则名称：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.ruleName}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>规则算法：&nbsp;</td>
				<td style="display: none">
					<input id="dqm_accuracyruleconf_rulealgorithmselectdetail" type="text" name="ruleAlgorithm" panelHeight="auto"/>
				</td>
				<td height="40px" id="dqm_accuracyruleconf_rulealgorithmselectdetailshow">
				</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>指标名称：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.kqiName}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>告警级别：&nbsp;</td>
				<td style="display: none">
					<input id="dqm_accuracyruleconf_warnlevelselectdetail" type="text" name="warnLevel" panelHeight="auto"/>
				</td>
				<td height="40px" id="dqm_accuracyruleconf_warnlevelselectdetailshow">
				</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>阀值上限：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.thresholdMax}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>阀值上限运算符：&nbsp;</td>
				<td style="display: none">
					<input id="dqm_accuracyruleconf_thresholdmaxoperatorselectdetail" type="text" name="thresholdMaxOperator" panelHeight="auto"/>
				</td>
				<td height="40px" id="dqm_accuracyruleconf_thresholdmaxoperatorselectdetailshow">
				</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>阀值下限：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.thresholdMin}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>阀值下限运算符：&nbsp;</td>
				<td style="display: none">
					<input id="dqm_accuracyruleconf_thresholdminoperatorselectdetail" type="text" name="thresholdMinOperator" panelHeight="auto"/>
				</td>
				<td height="40px" id="dqm_accuracyruleconf_thresholdminoperatorselectdetailshow">
				</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">创建者：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.creator}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">创建时间：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.strCreateTime}</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">最后修改者：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.modifier}</td>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">最后修改时间：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.strModifyTime}</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600"><span style="color:red;font-size:15px">*</span>模板名称：&nbsp;</td>
				<td height="40px">${accuracyRuleConf.templateName}</td>
				<td height="40px"></td>
				<td height="40px"></td>
			</tr>
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">口径描述：&nbsp;</td>
				<td height="68px" colspan="3">
					<div style="width:90%;padding-top:7px;line-height: 15px;height:68px;margin:0px;">${accuracyRuleConf.caliberDesc}</div>
				</td>
			</tr>
			
			<tr>
				<td height="40px" style="text-align:right;color:#398ece;font-weight:600">说明：&nbsp;</td>
				<td height="68px" colspan="3">
					<div style="width:90%;padding-top:7px;line-height: 15px;height:68px;margin:0px;">${accuracyRuleConf.remark}</div>
				</td>
			</tr>
			
			<tr>
			<td colspan="6" align="right" height="40px">
				<div id="dqm_accuracyruleconf_colsebtndivdetail" style="float:right"><input id="dqm_accuracyruleconf_baseinfocolsebtn" onclick="colseDialog()" onmouseout="cbart('dqm_accuracyruleconf_baseinfocolsebtn','btn_un')" onmouseover="sbart('dqm_accuracyruleconf_baseinfocolsebtn','btn_nu')" height="24px" width="64px" type="button" value="关  闭" class="btn_un">&nbsp;&nbsp;&nbsp;&nbsp;</div>
				<div id="dqm_accuracyruleconf_shrinkbtndivdetail" style="display:none"><input id="dqm_accuracyruleconf_baseinfoshrinkbtn" onclick="shrink()" onmouseout="cbart('dqm_accuracyruleconf_baseinfoshrinkbtn','btn_un')" onmouseover="sbart('dqm_accuracyruleconf_baseinfoshrinkbtn','btn_nu')" height="24px" width="64px" type="button" value="收  缩" class="btn_un">&nbsp;&nbsp;&nbsp;&nbsp;</div>
			</td>
		</tr>
		</table>
	</div>
	
	<!--维度规则配置信息div-->
	<div id="dqm_accuracyruleconf_tipinfodivdetail" style="display:none;width:100%;height:50%">
		<table id="dqm_accuracyruleconf_dimdatagriddetail">
		</table>
		
		<div id="dqm_accuracyruleconf_colsebtndiv" align="right" style="padding-top:7px;padding-bottom:7px"><input id="dqm_accuracyruleconf_colsebtn" onclick="colseDialog()" onmouseout="cbart('dqm_accuracyruleconf_colsebtn','btn_un')" onmouseover="sbart('dqm_accuracyruleconf_colsebtn','btn_nu')" height="24px" width="64px" type="button" value="关  闭" class="btn_un">&nbsp;&nbsp;&nbsp;&nbsp;</div>
	</div>
</form>